<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语音识别-夜雨飘零</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="/static/record.js"></script>
    <link href="/static/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
    <h1>夜雨飘零语音识别</h1>
</div>
<div id="content">
    <div>
        <a id="upload" onclick="uploadAudioFile()" class="file">音频文件识别</a>
        <img id="record_btn" onclick="record()" src="/static/record.png" alt="录音"/>
    </div>

    <div id="result">
        <textarea id="result_p"></textarea>
    </div>
    上传进度：
    <progress id="progress1" value="0" max="100"></progress>&nbsp;<text id="progress_text"></text>
</div>
<script>
    var is_recording = false;
    var host = location.origin;
    var recorder;
    var textarea = document.getElementById('result_p')
    let progress1 = document.getElementById('progress1')
    let progress_text = document.getElementById('progress_text')


    function record() {
        if (is_recording) {
            is_recording = false;
            stopRecording()
            document.getElementById('record_btn').src = '/static/record.png'
        } else {
            is_recording = true;
            startRecording()
            document.getElementById('record_btn').src = '/static/recording.gif'
        }
    }

    // 开始录音
    function startRecording() {
        let url = 'ws://' + location.hostname + ':5000'
        MASRRecorder.get(function (record) {
            recorder = record;
        }, url, textarea);
    }

    // 停止录音
    function stopRecording() {
        recorder.stop();
    }

    // 上传语音
    function uploadAudioFile(){
        var input = document.createElement("input");
        input.type = "file";
        input.accept = "audio/*";
        input.click();
        input.onchange = function(){
            var file = input.files[0];
            upload_file(host + "/recognition", file, function (state, e) {
                switch (state) {
                    case 'uploading':
                        const percentComplete = Math.round(e.loaded * 100 / e.total);
                        console.log(percentComplete + '%');
                        // 弹出进度条
                        progress1.value = percentComplete
                        progress_text.innerText = percentComplete + '%'
                        break;
                    case 'ok':
                        console.log(e.target.responseText)
                        textarea.value = e.target.responseText
                        break;
                    case 'error':
                        alert("上传失败");
                        break;
                    case 'cancel':
                        alert("上传被取消");
                        break;
                }
            });
        }
    }

    // 上传音频文件
    upload_file = function (url, file, callback) {
        var fd = new FormData();
        // 上传的文件名和数据
        fd.append("audio", file);
        var xhr = new XMLHttpRequest();
        xhr.timeout = 60000
        if (callback) {
            xhr.upload.addEventListener("progress", function (e) {
                callback('uploading', e);
            }, false);
            xhr.addEventListener("load", function (e) {
                callback('ok', e);
            }, false);
            xhr.addEventListener("error", function (e) {
                callback('error', e);
            }, false);
            xhr.addEventListener("abort", function (e) {
                callback('cancel', e);
            }, false);
        }
        xhr.open("POST", url);
        xhr.send(fd);
    }
</script>

</body>
</html>